<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-09-29 14:59:31
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-08 14:38:54
 * @FilePath: \vue-project\src\views\Other\Agreement.vue
 * @Description: 
 * 
-->
<template>
  <div class="agreement_container">
    <a-card hoverable>
      <a-space direction="vertical" fill>
        <a-row>
          <a-col>
            <a-button type="primary" @click="; (drawerInfo.visible = true), (drawerInfo.title = '添加协议')">添加</a-button>
          </a-col>
        </a-row>
        <a-table :columns="columns" :data="data">
          <template #name="{ record }">
            <a-link @click="viewAgreement(record)">{{ record.name }}</a-link>
          </template>
          <template #type="{ record }">
            <span>{{ record.type == 1 ? '条款一' : '条款二' }}</span>
          </template>
          <template #status="{ record }">
            <a-tag v-if="record.status == 1" color="green">正常</a-tag>
            <a-tag v-else color="gray">已禁用</a-tag>
          </template>
          <template #handle="{ record }">
            <a-space>
              <a-link href="javascript:;" @click="edit(record)">编辑</a-link>
              <a-link href="javascript:;" @click="del(record)">删除</a-link>
            </a-space>
          </template>
        </a-table>
      </a-space>
    </a-card>
  </div>
  <HandleForm :drawerInfo="drawerInfo" :formFields="formFields" :formConfig="formConfig" :rules="rules"
    @closeDrawer="drawerInfo.visible = false" @submitDrawer="submit" />
  <!-- 查看隐私详情 -->
  <a-modal :visible="modalInfo.visible" @cancel="modalInfo.visible = false" :width="420" unmount-on-close
    body-style="max-height: 600px">
    <template #title> {{ modalInfo.title }} </template>
    <div v-html="modalInfo.content"></div>
    <template #footer>
      <a-button type="primary" @click="modalInfo.visible = false">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getAgreement, saveAgreement, deleteOneAgreement } from '@/api/other.js'
import HandleForm from '@/components/HandleForm.vue'
import { Message } from '@arco-design/web-vue'
const columns = [
  {
    title: '协议名称',
    dataIndex: 'name',
    slotName: 'name'
  },
  {
    title: '协议类型',
    dataIndex: 'type',
    slotName: 'type'
  },
  {
    title: '协议状态',
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '操作',
    slotName: 'handle'
  }
]
const data = ref([])
const drawerInfo = ref({
  width: 800,
  visible: false,
  title: '添加协议'
})
//表单配置
const formConfig = reactive({
  width: '100%'
})
//表单字段配置
const formFields = ref([
  {
    type: 'input',
    prop: 'name',
    label: '协议名称',
    placeholder: '请输入协议名称',
    isShow: true,
    defaultValue: ''
  },

  {
    type: 'select',
    prop: 'type',
    label: '协议类型',
    placeholder: '请选择协议类型',
    isShow: true,
    defaultValue: '',
    options: [
      { label: '条款1', value: 1 },
      { label: '条款2', value: 2 }
    ]
  },

  {
    type: 'rick_text',
    prop: 'content',
    label: '内容',
    placeholder: '请输入内容',
    isShow: true,
    defaultValue: ''
  },
  {
    type: 'switch',
    prop: 'status',
    label: '是否启用',
    placeholder: '',
    active: 1,
    unActive: 0,
    isShow: true,
    defaultValue: 1
  }
])

//查看详情相关配置
const modalInfo = ref({
  visible: false,
  title: '',
  content: ''
})

const currentId = ref('')
//验证规则
const rules = reactive({
  name: [{ required: true, message: '协议名称不能为空', trigger: 'blur' }],
  method: [{ required: true, message: '请求类型不能为空', trigger: 'blur' }]
})
const getList = async () => {
  let res = await getAgreement()
  if (res.code == 200) data.value = res.data.list
}
getList()

//点击编辑
const edit = (row) => {
  formFields.value.map((item) => {
    for (const key in row) {
      if (item.prop == key) {
        item.defaultValue = row[key]
      }
    }
  })
  currentId.value = row.id
  drawerInfo.value.title = '编辑协议'
  drawerInfo.value.visible = true
}

//提交
const submit = async (formObj) => {
  let res = await saveAgreement(formObj, currentId.value)
  if (res.code == 200) {
    Message.success(currentId.value ? '编辑成功' : '添加成功')
    drawerInfo.value.visible = false
    currentId.value = ''
    getList()
  }
}

//查看协议
const viewAgreement = (row) => {
  modalInfo.value.title = row.name
  modalInfo.value.content = row.content
  modalInfo.value.visible = true
}
//删除协议
const del = async (row) => {
  if (row.id) {
    let res = await deleteOneAgreement(row.id)
    if (res.code == 200 && res.data) {
      Message.success(`删除${row.name}协议成功`)
      getList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
